<template>
		<view class="player">
			<view @tap="openPlayPage()" class="picWrap" :class="curMusicInfo.name ? 'picWrapBorder' : ''"><image :class="globalPlayStatus?picanimation:picanimationPaused" class="album-picture" :src="curMusicInfo.name ? curMusicInfo.picurl : '../static/tabBar_icon/performance-selected.png'"></image></view>
			<view class="namewrap" @tap="openPlayPage()">
				<view class="musicname">{{curMusicInfo.name ? `${curMusicInfo.name}-${curMusicInfo.singer} `: '未播放歌曲'}}</view>
			</view>
			<view class="playbtn" @tap='playerStat'><i class="panelIcon" :class="globalPlayStatus? playingIcon:stopgIcon"></i></view>
			<view class="songlist" @tap="popUp"><i class="iconfont icon-bofangliebiao panelIcon"></i></view>
			<uni-popup ref="popup" type="bottom">
				<view class="listWrap">
					<view class="location" @tap="scrollInto">
						<i style="font-size: 60rpx;" class="iconfont icon-zhunxin"></i>
					</view>
					<view class="list-title">
						当前播放<text>({{globalPlayList.length}})</text>
					</view>
					<scroll-view class="scrollWrap" :scroll-y="true" :scroll-into-view="scrollId">
						<view class="list-item" :id="'item' + index" v-for="(item, index) in globalPlayList" :key="item.id" :style="{color: curTapIndex === index? '#f04242': '', marginTop:index === 0 ? '0rpx':'', marginBottom: index === (globalPlayList.length-1)? '100rpx':''}">
								<view class="musicInfo" @tap="playMusic(index)">
									<i v-if="curTapIndex == index" style="margin-right: 6rpx;" class="iconfont icon-playing-copy"></i>
									<text class="music-name">{{item.name}}</text><text class="singer">-{{item.singer}}</text>
								</view>
								<view class="close-btn" @tap="deleteSong(index)">
									<i class="iconfont icon-cha"></i>
								</view>
						</view>
					</scroll-view>
				</view>
			</uni-popup>
    </view>
</template>

<script>
	import	uniPopup from '../unicomponents/uni-popup/uni-popup.vue'
	import { mapState, mapMutations } from 'vuex'
export default {
	props:[''],
	data () {
		return {
			playerStatu: false,
			playingIcon: 'iconfont icon-zantingtingzhi1',
			stopgIcon: 'iconfont icon-media-play-03',
			picanimation: 'picanimation',
			picanimationPaused: 'picanimation picanimationPaused',
			scrollId: null
		}
	},
	computed:{
		...mapState(['curTapIndex', 'globalPlayList', 'globalPlayStatus', 'curMusicInfo']),
		scrollIndex(){
			return 'item' + this.curTapIndex
		}
	},
	components:{
		uniPopup
	},
	created() {
		// 监听音乐播放结束
		this.$player.onEnded(function(){
		this.changeStopStatus()
		this.playerStatu = this.globalPlayStatus
		})
	},
	methods:{
		...mapMutations(['changePlayStatus', 'changeStopStatus', 'changeGlobalPlayList', 'changeCurMusicInfo', 'changeCurTapIndex']),
		playerStat() {
			if (this.curMusicInfo.name) {
				if (this.globalPlayStatus){
					this.$player.pause()
					this.changeStopStatus()
				} else {
					this.$player.play()
					this.changePlayStatus()
				}
			} else {
				uni.showToast({
					title: '当前没有播放信息',
					icon: 'none'
				})
			}
		},
		playMusic(index){
			// 获取点击的相应歌曲信息
			// 从this.store中获取点击的按钮的index
			// this.openPlayPage(index)
			let tapedBtnIndex = this.curTapIndex
			// 如果index不存在,则用户为第一次点击页面
			if (tapedBtnIndex === null) {
				// 保存index
				this.changeCurTapIndex(index)
				// 改全局播放状态为true
				this.changePlayStatus()
				// 开始播放
				this.playSong(index)
			} else {
				// 如果index存在，则判断当前index是否与之前保存的index相等
				if ( tapedBtnIndex == index ) {
					// 相等则根据播放器播放状态决定暂停还是继续播放歌曲
					// console.log("索引相同播放器状态：",this.$player.paused);
					console.log('全局播放状态：',this.globalPlayStatus);
					if (this.globalPlayStatus) {
						// 如果当前是播放状态则暂停播放器
						this.changeStopStatus()											// 更新播放器为暂停状态
						this.$player.pause()  											// 暂停
					} else {
						// 如果当前是暂停状态则开启播放器，并打开播放页面
						this.changePlayStatus()											// 更新播放器为播放状态
						this.$player.play()													// 播放
					}
				} else {
					// 用户点击其他歌曲
					console.log('切换歌曲的index为:', index);
					this.changeCurTapIndex(index) 	// 将现在点击按钮的index替换之前的index
					// console.log("索引不同播放器状态：",this.$player.paused);
					this.changePlayStatus()								// 更新播放器为播放状态
					this.playSong(index)  								// 重新给播放器src赋值
				}
			}
		},
		playSong(index){
			let musicInfo = this.globalPlayList[index]
			musicInfo.index = index
			this.changeCurMusicInfo(musicInfo)
			this.$player.title = musicInfo.name
			this.$player.singer = musicInfo.singer
			this.$player.coverImgUrl = musicInfo.picurl
			this.$player.src =  `https://music.163.com/song/media/outer/url?id=${musicInfo.mid}.mp3`
		},
		deleteSong(index) {
		},
		scrollInto(){
			this.scrollId = 'item'
			this.$nextTick(function(){
				this.scrollId = 'item' + this.curTapIndex
			})
		},
		openPlayPage(){
			if (!this.curMusicInfo.name) {
				uni.showToast({
					title: '当前没有播放信息',
					icon: 'none'
				})
			} else {
				let mid = this.curMusicInfo.mid
				uni.navigateTo({
					url: `../play/play?mid=${mid}`
				})
			}
		},
		popUp()	{
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			if (this.globalPlayList.length > 0) {
				this.$refs.popup.open('bottom')
			} else {
				uni.showToast({
					title: '当前歌单为空',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.player {
		width: 100%;
		height: 3rem;
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		.picWrap {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 3rem;
			height: 3rem;
			border-radius: 50%;
			position: absolute;
			top: -1rem;
			left: 0.3rem;
			.album-picture {
				width: 3rem;
				height: 3rem;
				border-radius: 55rpx;
			}
		}
		.namewrap {
			z-index: 10;
			width: 13rem;
			overflow: hidden;
			white-space: nowrap;
			margin-left: 4rem;
			.musicname {
				width: 100%;
				animation:movex 4s linear 0.2s;
				font-size: 16px;
				font-weight: 500;
			}
		}
		.playbtn {
			margin-right: -0.7rem;
			position: relative;
			z-index: 10;
			box-shadow: -25px 20px 15px 20px white;
		}
		.songlist {
			margin-right: -0.8rem;
		}
	}
	
	.picWrapBorder {
		border: 4px solid rgba(236, 65, 65, 0.78);
	}
	
	.panelIcon {
		font-size: 1.7rem;
	}
	
	.listWrap {
		width: 100%;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		height: 60vh;
		border-radius: 20px 20px 0 0;
		.location {
			position: fixed;
			bottom: 38rpx;
			right: 70rpx;
			z-index: 15;
		}
		.list-title {
			font-size: 33rpx;
			margin: 21rpx 30rpx 0rpx;
			font-weight: 600;
			height: 60rpx;
		}
		.scrollWrap {
			height: 100%;
			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 31rpx;
				.musicInfo {
					width: 88%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					display: flex;
					justify-content: flex-start;
					align-items: baseline;
					.music-name {
						font-size: 28rpx;
						font-weight: 500;
					}
					.singer {
						font-size: 20rpx;
						font-weight: 500;
						color: #aaa;
					}
				}
				.close-btn {
					width: 50rpx;
					height: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.iconfont {
						font-size: 26rpx;
						color: #aaa;
					}
				}
			}
		}
	}
	
	@keyframes movex{
		0% {
			transform: translate3d(0,0,0);
		}
		50% {
			transform: translate3d(50%,0,0);
		}
		100% {
			transform: translate3d(-60%,0,0);
		}
	}
</style>
